<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<!-- 		uniapp使用uni-simple-router插件，导致H5端uni.navigateBack()方法报错
		https://blog.csdn.net/weixin_45941290/article/details/109213715 -->
		<u-navbar title-color="#fff" :background="{background:'#4fc08d'}" title="个人名片">
			<view class="navbar-right" slot="right">
				<u-icon name="edit-pen" size="20"></u-icon>
				<view @click="navTo('./personalCard-add')">发布</view>
			</view>
		</u-navbar>
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore" lower-threshold="10upx">
			<view class="page-box">
				<view class="order" v-for="(item, index) in itemList" :key="item.id">
					<view class="item">
						<view class="left">
							<image :src="item.wxUrl.substr(0, 4) === 'http'? item.wxUrl: (baseUrl+item.wxUrl)" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="box">
								<view class="test">
									<view class="title u-line-2">{{ item.nickName }}</view>
									<view class="number">
										{{ item.summary }}
									</view>
								</view>
								<view class="right">
									<u-button v-if="item.topDate" class="top" type="info" @click="topHandle(item.id)"
										disabled>已置顶
									</u-button>

									<u-button v-else class="top" type="success" @click="topHandle(item.id)">置顶
									</u-button>
									<u-button class="top" type="warning" @click="deleteHandle(item.id)">删除</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="itemList.length>9" :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'

	export default {
		data() {
			return {
				baseUrl: API_URL,
				loadStatus: 'loadmore',
				curPage: 0,
				itemList: []
			}
		},
		onShow() {
			if (this.itemList.length == 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			/**
			 * 置顶
			 * @param {Object}
			 */
			topHandle(id) {
				this.$api.api('personalCard.top', {
						"id": id
					})
					.then(res => {
						if (res.code == 200) {
							this.refresh()
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '置顶成功'
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.itemList = []
				this.curPage = 0
				this.loadStatus = 'loadmore'
				this.loadMore()

			},
			/**
			 * 获取几天前
			 */
			getTime(dateStr) {
				return this.$tools.getTimeInterval(new Date(dateStr).getTime(), new Date().getTime())
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.loadStatus == 'nomore') {
					return
				}
				//加载中
				this.loadStatus = 'loading';
				let page = this.curPage + 1
				this.$api.api('personalCard.myList', {
						"pageNum": page,
						"pageSize": 10,
						"orderByColumn": "createTime",
						"isAsc": "descending"
					})
					.then(res => {
						if (res.code == 200) {
							this.itemList = this.itemList.concat(res.rows)
							if (res.total > this.itemList.length) {
								this.loadStatus = 'loadmore';
								this.curPage++;
							} else {
								this.loadStatus = 'nomore';
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})
			},
			//删除
			deleteHandle(id) {
				this.$api.apiPath('personalCard.delete', "/" + id)
					.then(res => {
						console.log("进入信息", res)
						if (res.code == 200) {
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.navbar-right {
		margin-right: 50rpx;
		color: #FFFFFF;
		display: flex;
	}

	// 没有该配置，无法触发加载更多
	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.order {
		width: 710rpx; //宽度
		background-color: #ffffff;
		margin: 20rpx auto; //上下间距
		border-radius: 20rpx; //倒角
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 90%;

				.box {
					display: flex;

					.test {
						width: 60%;

						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.number {
							margin: 10rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}
					}

					.right {
						width: 40%;
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;
						display: flex;

						.top {
							width: 100rpx;
							height: 50rpx;
						}
					}
				}

			}
		}
	}
</style>
